<template>
  <div v-loading="loading">
    <el-form ref="form" :model="form" :rules="rules" label-width="120px" class="dataForm">
      <el-row>
        <el-col :span="12">
          <el-form-item :label="$t('申请标题')" prop="actTitle">
            <el-input v-model="form.actTitle" :placeholder="$t('申请标题')" show-word-limit :maxlength="100" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item :label="$t('退出策略')" prop="exitStrategy">
            <dictSelect
              v-model="form.exitStrategy"
              :disabled="type"
              :clearable="true"
              dictionary="deal_exit_strategy"
            />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item :label="$t('项目名称')" prop="dealBase.dealName">
            <el-input v-model="form.dealBase.dealName" disabled :placeholder="$t('项目名称')" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item :label="$t('总投资额') + $t('金额单位')" prop="totalInvestment">
            <money v-model="form.totalInvestment" unit="w" disabled />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item :label="$t('项目负责人')" prop="dealUser.nickName">
            <el-input v-model="form.dealUser.nickName" disabled :placeholder="$t('项目负责人')" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item :label="$t('所属部门')" prop="dealDept.deptName">
            <el-input v-model="form.dealDept.deptName" disabled :placeholder="$t('所属部门')" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item :label="$t('投资时间')" prop="investmentTime">
            <DatePicker v-model="form.investmentTime" :placeholder="$t('投资时间')" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item :label="$t('最新持股比例(%)')" prop="latestShareholdingRatio">
            <Ratio v-model="form.latestShareholdingRatio" disabled :placeholder="$t('最新持股比例(%)')" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item :label="$t('在投成本')+ $t('金额单位')" prop="reinvestmentCost">
            <money v-model="form.reinvestmentCost" unit="w" disabled />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item :label="$t('已退出总额')+ $t('金额单位')" prop="exitTotal">
            <money v-model="form.exitTotal" unit="w" disabled />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item :label="$t('拟退出时间')" prop="draftExitTime">
            <DatePicker v-model="form.draftExitTime" :placeholder="$t('拟退出时间')" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item :label="$t('拟退出持股比例(%)')" prop="draftExitShareholdingRatio">
            <el-input-number v-model="form.draftExitShareholdingRatio" :max="100" :controls="false" :placeholder="$t('拟退出持股比例(%)')" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item :label="$t('拟退出金额')+ $t('金额单位')" prop="draftExitPrice">
            <money v-model="form.draftExitPrice" unit="w" @change="expectPerSharePriceCount" />
          </el-form-item>
        </el-col>
        <!--        <el-col :span="12">
          <el-form-item :label="$t('退出方式')" prop="exitMode">
            <el-select v-model="form.exitMode" filterable :placeholder="$t('退出方式')" @change="exitModelChange">
              <el-option
                v-for="dict in exitModeOptions"
                :key="dict.dictValue"
                :label="$t(dict.dictLabel)"
                :value="dict.dictValue"
              />
            </el-select>
          </el-form-item>
        </el-col>-->
        <el-col :span="12">
          <el-form-item :label="$t('优先退出方式')" prop="priorWay">
            <dict-select
              v-model="form.priorWay"
              dictionary="exit_plan_item"
              :placeholder="$t('优先退出方式')"
            />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item :label="$t('备选退出方式')" prop="spareWay">
            <dict-select
              v-model="form.spareWay"
              dictionary="exit_plan_item"
              :placeholder="$t('备选退出方式')"
            />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item :label="$t('保底退出方式')" prop="lowestWay">
            <dict-select
              v-model="form.lowestWay"
              dictionary="exit_plan_item"
              :placeholder="$t('保底退出方式')"
            />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item :label="$t('倍数')" prop="multiple">
            <el-input v-model="form.multiple" maxlength="50" show-word-limit :placeholder="$t('倍数')" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item :label="$t('IRR')" prop="irr">
            <el-input v-model="form.irr" maxlength="50" show-word-limit :placeholder="$t('IRR')" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item :label="$t('报告时间')" prop="reportTime">
            <DatePicker v-model="form.reportTime" :placeholder="$t('报告时间')" />
          </el-form-item>
        </el-col>
        <!--        <el-col :span="24">
          <el-form-item :label="$t('其他潜在退出方案')" prop="potentialExitOptions">
            <el-input v-model="form.potentialExitOptions" type="textarea" maxlength="2000" show-word-limit :placeholder="$t('其他潜在退出方案')" />
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item :label="$t('下一步行动及关注重点')" prop="actionAndFocus">
            <el-input v-model="form.actionAndFocus" type="textarea" maxlength="2000" show-word-limit :placeholder="$t('下一步行动及关注重点')" />
          </el-form-item>
        </el-col>-->
        <el-col :span="24">
          <el-form-item :label="$t('投资税务架构')" prop="investmentTaxStructure">
            <el-input v-model="form.investmentTaxStructure" type="textarea" maxlength="2000" show-word-limit :placeholder="$t('投资税务架构')" />
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item :label="$t('可行性及潜在风险')" prop="feasibilityRisks">
            <el-input v-model="form.feasibilityRisks" type="textarea" maxlength="2000" show-word-limit :placeholder="$t('可行性及潜在风险')" />
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item :label="$t('备注')" prop="remark">
            <el-input v-model="form.remark" type="textarea" maxlength="2000" show-word-limit :placeholder="$t('备注')" />
          </el-form-item>
        </el-col>
      </el-row>

      <div v-if="form.priorWay === 'KGQCS' || form.spareWay === 'KGQCS' || form.lowestWay === 'KGQCS'">
        <div class="area-header">
          <span class="area-header-title">{{ $t('控股权出售') }}</span>
        </div>
        <el-row>
          <el-col :span="12">
            <el-form-item :label="$t('主要股东及比例')" prop="mainHolderRatioKgq">
              <el-input v-model="form.mainHolderRatioKgq" :placeholder="$t('主要股东及比例')" show-word-limit maxlength="100" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item :label="$t('预计出售估值')" prop="expectSellKgq">
              <el-input v-model="form.expectSellKgq" :placeholder="$t('预计出售估值')" show-word-limit maxlength="100" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item :label="$t('是否有拖售权')" prop="dragAlongRightsKgq">
              <el-input v-model="form.dragAlongRightsKgq" :placeholder="$t('是否有拖售权')" show-word-limit maxlength="100" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item :label="$t('潜在买家范围')" prop="potentialBuyerKgq">
              <el-input v-model="form.potentialBuyerKgq" :placeholder="$t('潜在买家范围')" show-word-limit maxlength="100" />
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item :label="$t('下一步计划')" prop="nextPlanKgq">
              <el-input v-model="form.nextPlanKgq" type="textarea" :placeholder="$t('下一步计划')" show-word-limit maxlength="1000" />
            </el-form-item>
          </el-col>
        </el-row>
      </div>
      <div v-if="form.priorWay === 'SSGQCS' || form.spareWay === 'SSGQCS' || form.lowestWay === 'SSGQCS'">
        <div class="area-header">
          <span class="area-header-title">{{ $t('少数股权出售') }}</span>
        </div>
        <el-row>
          <el-col :span="12">
            <el-form-item :label="$t('拟出售比例')" prop="sellRatioSsgq">
              <dict-select
                v-model="form.sellRatioSsgq"
                dictionary="sell_ratio_ssgq"
                :placeholder="$t('拟出售比例')"
              />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item :label="$t('出售时机')" prop="sellOpportunitySsgq">
              <el-input v-model="form.sellOpportunitySsgq" :placeholder="$t('出售时机')" show-word-limit maxlength="100" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item :label="$t('预计出售估值')" prop="expectSellSsgq">
              <el-input v-model="form.expectSellSsgq" :placeholder="$t('预计出售估值')" show-word-limit maxlength="100" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item :label="$t('潜在买家范围')" prop="potentialBuyerSsgq">
              <el-input v-model="form.potentialBuyerSsgq" :placeholder="$t('潜在买家范围')" show-word-limit maxlength="100" />
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item :label="$t('下一步计划')" prop="nextPlanSsgq">
              <el-input v-model="form.nextPlanSsgq" type="textarea" :placeholder="$t('下一步计划')" show-word-limit maxlength="1000" />
            </el-form-item>
          </el-col>
        </el-row>
      </div>
      <div v-if="form.priorWay === 'HGJQS' || form.spareWay === 'HGJQS' || form.lowestWay === 'HGJQS'">
        <div class="area-header">
          <span class="area-header-title">{{ $t('回购及清算') }}</span>
        </div>
        <el-row>
          <el-col :span="12">
            <el-form-item :label="$t('何时触发回购')" prop="triggerRepurchaseHg">
              <el-date-picker
                v-model="form.triggerRepurchaseHg"
                clearable
                style="width: 200px"
                type="date"
                value-format="yyyy-MM-dd"
                :placeholder="$t('何时触发回购')"
              />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item :label="$t('预计回收金额')+ $t('金额单位')" prop="expectRecoverMoneyHg">
              <Money v-model="form.expectRecoverMoneyHg" unit="w" :placeholder="$t('预计回收金额')" />
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item :label="$t('下一步计划')" prop="nextPlanHg">
              <el-input v-model="form.nextPlanHg" type="textarea" :placeholder="$t('下一步计划')" show-word-limit maxlength="1000" />
            </el-form-item>
          </el-col>
        </el-row>
      </div>
      <div v-if="form.priorWay === 'IPO' || form.spareWay === 'IPO' || form.lowestWay === 'IPO'">
        <div class="area-header">
          <span class="area-header-title">{{ $t('IPO(明确计划)') }}</span>
        </div>
        <el-row>
          <el-col :span="12">
            <el-form-item :label="$t('预计上市地')" prop="expectListedAddressIpo">
              <el-input v-model="form.expectListedAddressIpo" :placeholder="$t('预计上市地')" show-word-limit maxlength="100" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item :label="$t('申报/上市时间')" prop="listedTimeIpo">
              <el-date-picker
                v-model="form.listedTimeIpo"
                clearable
                style="width: 200px"
                type="date"
                value-format="yyyy-MM-dd"
                :placeholder="$t('申报/上市时间')"
              />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item :label="$t('上市后锁定期')" prop="listedLockPeriodIpo">
              <el-input v-model="form.listedLockPeriodIpo" :placeholder="$t('上市后锁定期')" show-word-limit maxlength="50" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item :label="$t('需关注事项')" prop="focusItemIpo">
              <el-input v-model="form.focusItemIpo" :placeholder="$t('需关注事项')" show-word-limit maxlength="100" />
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item :label="$t('下一步计划')" prop="nextPlanIpo">
              <el-input v-model="form.nextPlanIpo" type="textarea" :placeholder="$t('下一步计划')" show-word-limit maxlength="1000" />
            </el-form-item>
          </el-col>
        </el-row>
      </div>
      <div v-if="form.priorWay === 'CYGC' || form.spareWay === 'CYGC' || form.lowestWay === 'CYGC'">
        <div class="area-header">
          <span class="area-header-title">{{ $t('持有/观察') }}</span>
        </div>
        <el-row>
          <el-col :span="12">
            <el-form-item :label="$t('继续持有原因')" prop="reasonHoldingGc">
              <el-input v-model="form.reasonHoldingGc" :placeholder="$t('继续持有原因')" show-word-limit maxlength="100" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item :label="$t('关注事项')" prop="focusItemGc">
              <el-input v-model="form.focusItemGc" :placeholder="$t('关注事项')" show-word-limit maxlength="100" />
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item :label="$t('下一步计划')" prop="nextPlanGc">
              <el-input v-model="form.nextPlanGc" type="textarea" :placeholder="$t('下一步计划')" show-word-limit maxlength="1000" />
            </el-form-item>
          </el-col>
        </el-row>
      </div>
      <div v-if="form.priorWay === 'LGTC' || form.spareWay === 'LGTC' || form.lowestWay === 'LGTC'">
        <div class="area-header">
          <span class="area-header-title">{{ $t('老股退出') }}</span>
        </div>
        <el-row>
          <el-col :span="24">
            <el-form-item :label="$t('下一步计划')" prop="nextPlanLgtc">
              <el-input v-model="form.nextPlanLgtc" type="textarea" :placeholder="$t('下一步计划')" show-word-limit maxlength="1000" />
            </el-form-item>
          </el-col>
        </el-row>
      </div>

      <!-- 附件列表 -->
      <FileTable :list.sync="form.fileList" data-type="deal_exit" :btn-show="!otherBtnHide" />
    </el-form>
    <div slot="footer" class="dialog-footer" style="text-align: right;">
      <!--保存，保存并启动流程，取消 三个按钮-->
      <FormBtn ref="formBtn" :cancel-func="cancel" :bus-data="form" has-permi="deal:exit" :btn-hide="btnHide" :menu-key="menuKey" />
    </div>
  </div>
</template>

<script>
import { saveDealExit, getDealExit, getExitBaseInfo } from '@/api/sass/kaihui/exit/kaiHuiDealExit'
import { getDealName } from '@/api/base/deal/dealBase'

export default {
  data() {
    return {
      // 菜单标识
      menuKey: 'deal_exit',
      // 退出方式字典
      exitModeOptions: [], // 表单参数
      form: {
        dealBase: {
          dealName: ''
        },
        dealUser: {
          nickName: ''
        },
        dealDept: {
          deptName: ''
        },
        // 附件列表
        fileList: []
      },
      // 退出方式
      exitWaySelect: '',
      // 根据退出方式选择是否展示受让方
      isShowTransferee: false,
      // 是否隐藏保存按钮
      btnHide: false,
      // 是否隐藏其它按钮
      otherBtnHide: false,
      // 表单校验
      rules: {
        draftExitTime: [{ required: true, message: this.$t('必填信息'), trigger: 'blur' }],
        draftExitShareholdingRatio: [{ required: true, message: this.$t('必填信息'), trigger: 'blur' }],
        draftExitPrice: [{ required: true, message: this.$t('必填信息'), trigger: 'blur' }],
        // exitMode: [{ required: true, message: this.$t('必填信息'), trigger: 'blur' }],
        transferee: [{ required: true, message: this.$t('必填信息'), trigger: 'blur' }],
        actTitle: [{ required: true, message: this.$t('必填信息'), trigger: 'blur' }],
        priorWay: [{ required: true, message: this.$t('必填信息'), trigger: 'blur' }],
        exitStrategy: [{ required: false, message: this.$t('必填信息'), trigger: 'blur' }]
        // spareWay: [{ required: true, message: this.$t('必填信息'), trigger: 'blur' }]
      },
      // 遮罩层
      loading: false,
      // 操作按钮默认不展示
      buttonShow: true,
      type: undefined
    }
  },
  created() {
    this.getDicts('exit_mode').then(response => {
      this.exitModeOptions = response.data
    })
    this.$bus.$emit('async_done')
  },
  methods: {
    // 初始化数据
    init(data) {
      this.loading = true
      if (data != null && data.id !== undefined && data.id !== '' && data.id !== null) {
        getDealExit(data.id).then(response => {
          this.form = response.data
          this.exitModelChange(this.form.exitMode)
          this.loading = false
        })
      } else {
        this.reset()
        // 默认带出流程中必须要传的附件
        if (data !== null) {
          this.form.fileList = data.fileList
        }
        this.exitModelChange('')
        getExitBaseInfo(this.$route.query.id).then(response => {
          if (response.data != null) {
            this.form = response.data
            if (data != null) {
              this.form.actTitle = data.actTitle
            }
            this.form.id = undefined
            if (data) {
              this.form.exitStrategy = data.exitStrategy
              this.type = data.exitStrategy
            }
          }
          this.loading = false
        })
      }
    },
    // 表单重置
    reset() {
      this.form = {
        id: undefined,
        dealBase: {
          id: this.$route.query.id,
          dealName: ''
        },
        totalInvestment: undefined,
        userId: undefined,
        dealUser: {
          id: undefined,
          nickName: ''
        },
        deptId: undefined,
        dealDept: {
          id: undefined,
          deptName: ''
        },
        actTitle: undefined,
        investmentTime: undefined,
        latestShareholdingRatio: undefined,
        reinvestmentCost: undefined,
        exitTotal: undefined,
        draftExitTime: undefined,
        draftExitShareholdingRatio: undefined,
        draftExitPrice: undefined,
        exitMode: undefined,
        exitSharesNumber: undefined,
        expectPerSharePrice: undefined,
        transferee: undefined,
        remark: undefined,
        investmentTaxStructure: undefined,
        feasibilityRisks: undefined,
        feasibilityRisksRemark: undefined,
        exitStrategyRemark: undefined,
        multiple: undefined,
        irr: undefined,
        priorWay: undefined,
        spareWay: undefined,
        lowestWay: undefined,
        mainHolderRatioKgq: undefined,
        expectSellKgq: undefined,
        dragAlongRightsKgq: undefined,
        potentialBuyerKgq: undefined,
        nextPlanKgq: undefined,
        sellRatioSsgq: undefined,
        sellOpportunitySsgq: undefined,
        expectSellSsgq: undefined,
        potentialBuyerSsgq: undefined,
        nextPlanSsgq: undefined,
        triggerRepurchaseHg: undefined,
        expectRecoverMoneyHg: undefined,
        nextPlanHg: undefined,
        expectListedAddressIpo: undefined,
        listedTimeIpo: undefined,
        listedLockPeriodIpo: undefined,
        focusItemIpo: undefined,
        nextPlanIpo: undefined,
        nextPlanGc: undefined,
        nextPlanLgtc: undefined,
        reasonHoldingGc: undefined,
        focusItemGc: undefined,
        potentialExitOptions: undefined,
        actionAndFocus: undefined,
        exitStrategy: undefined,
        reportTime: new Date(),
        createBy: undefined,
        createTime: undefined,
        updateBy: undefined,
        updateTime: undefined,
        delFlag: undefined
      }
      this.resetForm('form')
    },
    // 取消按钮
    cancel() {
      this.$parent.$parent.formOpen = false
      if (this.$parent.$parent.dealExitOpen !== undefined) {
        this.$parent.$parent.dealExitOpen = false
      }
      this.$parent.$parent.reset()
    },
    // 关闭form页面
    closeForm(type) {
      // 关闭form页面遮罩层
      this.loading = false
      if (type !== 'actSave') {
        // 关闭form页面
        this.$parent.$parent.formOpen = false
        // 刷新list页面
        if (this.$parent.$parent.dealExitOpen !== undefined) {
          this.$parent.$parent.dealExitOpen = false
        }
        // 刷新list页面
        if (this.$parent.$parent.getList) {
          this.$parent.$parent.getList()
        }
        if (this.$parent.$parent.getDealExitList) {
          this.$parent.$parent.getDealExitList()
        }
      }
    },
    /** 提交按钮 */
    submitForm: function(type) {
      return new Promise((resolve, reject) => {
        this.$refs['form'].validate(valid => {
          // 验证数据
          if (valid) {
            // 弹出遮罩层
            this.loading = true
            // 保存方式，如果值为actSave则是从流程表单中进行的保存，默认将delFlag 设置为2,审批通过后在更新为0
            this.form.saveType = type
            // 保存数据
            saveDealExit(this.form).then(response => {
              if (response.code === 200) {
                // 点击的按钮是保存并启动流程
                if (type === 'process') {
                  // 设置数据id方式启动流程后取消并再次启动会创建多条记录
                  this.form.id = response.data.id
                  // 启动流程
                  this.startProcess(response.data.id)
                  // 点击的仅保存
                } else {
                  this.msgSuccess(this.$t('保存成功'))
                  // 关闭form页面
                  this.closeForm(type)
                }
                resolve(response.data.id)
              } else {
                this.msgError(response.msg)
                this.loading = false
                reject(response)
              }
            }).catch(() => {
              this.loading = false
            })
          } else {
            this.locationError(document)
            reject()
          }
        })
      })
    },
    // 启动流程
    startProcess: async function(dataId) {
      var dealName = await getDealName(this.$route.query.id)
      this.loading = false
      // 启动流程时候传入的参数
      const processData = {}
      // 待办标题
      processData.title = '「' + dealName + '」' + ':' + this.form.actTitle
      // 业务表名
      processData.dataTable = 'deal_exit'
      // 业务ID
      processData.dataId = dataId
      // 业务表单地址(待办页面需要打开的页面)
      processData.formPath = '@/views/saas/kaihui/exit/kaiHuiDealExitForm'
      processData.viewPath = '@/views/saas/kaihui/exit/kaiHuiDealExitView'
      // 菜单标识(根据菜单标识判断的走哪个流程)
      processData.menuKey = this.menuKey
      this.startProcessByMenu(processData, () => {
        this.form.actStatus = 'D'
        this.msgSuccess(this.$t('数据保存成功,流程启动成功'))
        this.closeForm()
      })
    },
    exitModelChange(val) {
      if (val === 'merger' || val === 'transfer_shares') {
        this.isShowTransferee = true
      } else {
        this.isShowTransferee = false
      }
    },
    // 退出方式字典翻译
    exitModeFormat(row) {
      return this.selectDictLabel(this.exitModeOptions, row)
    },
    // 预计每股均价 = 拟退出金额/退出股数
    expectPerSharePriceCount() {
      if (this.form.exitSharesNumber !== 0) {
        this.form.expectPerSharePrice = this.form.draftExitPrice / this.form.exitSharesNumber
      }
    }
  }

}
</script>
